<script setup>
import { set } from 'vue';
import { Message, MessageBox } from 'element-ui';
import { forEach, cloneDeep, some } from 'lodash-es';
import { getToken } from '@/utils/auth';
import { useRequest } from '@/hooks/requestHooks';
import { useWatch } from '@/hooks/useWatch';
import { useGlobalState } from '@/store/globalState.js';
import { useResetForm, useHandleNhData } from '@/hooks/tool.js';
import { printYear } from '@/utils/index.js';
import { getOneEnterprise, getBasisHistory, getAgreementInfo, editAgreementInfo, getProjectInfo } from '@/api/index.js';
import DataImport from '@/components/DataImport/index.vue';
const props = defineProps({
  enterpriseCode: { type: String, default: '' },
  cancel: { type: Boolean, default: null },
  mpciDisabled: { type: Boolean, default: true },
  reportCode: { type: String, default: '' },
  mpciSubmit: { type: Boolean, default: false },
  openTitle: { type: String, default: () => '' },
  mpciBuildingCode: { type: Array, default: () => [] },
});
const emit = defineEmits(['mpciUpload']);
const { enterpriseCode, cancel, mpciDisabled, reportCode, mpciSubmit, openTitle, mpciBuildingCode } = toRefs(props);
const queryParams = ref({
  agreementCode: '', //合同编号
  agreementAmount: '', //合同金额
  agreementSignTime: '', //签约时间
  agreementStartTime: '', //合同结束时间
  agreementEndTime: '', //合同开始时间
  entrustType: '', //托管类型
  agreementContentType: '',
  basisJson: [],
  projectCode: '',
  operatorName: useGlobalState()?.globalState?.userInfo?.name,
});
const upload = ref(null);
const Forms = ref(null);
const tables = ref(null);
const dateRange = ref([]);
const tableLists = ref([]);
const typeList = ref(['基准能耗', '基准费用']);
const mergeArr = ref(['date']); //合并字段
const mergeObj = ref({});
const showWaterColumn = ref(false);
const showEleColumn = ref(false);
const showAirColumn = ref(false);
const activeName = ref('');
const agreementContentType = ref([]);
const bgjlOpen = ref(false);
const bgjlLists = ref([]);
const enterpriseLists2 = ref([]);
const UploadUrl = useGlobalState().globalState.serverUrl + '/entrust/basis/importData';
const uploadList = ref({
  // 设置上传的请求头部
  headers: { Authorization: 'Bearer ' + getToken() },
  // 上传的地址
  url: useGlobalState().globalState.serverUrl + '/entrust/agreement/save',
});
const fileLists = ref([]);
const REQUIRED = ref(false);
const [enterpriseLists, , enterpriseRun] = useRequest(getOneEnterprise, {
  defaultParams: [{ enterpriseCode: props.enterpriseCode }],
  manual: true,
  onSuccess: data => {
    if (openTitle.value === '详情' || openTitle.value === '编辑') {
      let obj = handleQuery({ projectCode: reportCode.value });
      projectInfoRun(obj);
    }
    // enterpriseLists2.value = data.data;
  },
});
const [, agreementInfoRunLoading, agreementInfoRun] = useRequest(getAgreementInfo, {
  defaultParams: [],
  manual: true,
  onSuccess: data => {
    let n = data.data;
    queryParams.value.agreementSignTime = n?.agreement?.agreementSignTime ?? '';
    queryParams.value.agreementCode = n?.agreement?.agreementCode ?? '';
    queryParams.value.agreementAmount = n?.agreement?.agreementAmount ?? '';
    dateRange.value = [n?.agreement?.agreementStartTime ?? '', n?.agreement?.agreementEndTime ?? ''];
    queryParams.value.agreementStartTime = dateRange.value[0];
    queryParams.value.agreementEndTime = dateRange.value[1];
    queryParams.value.entrustType = n?.agreement?.entrustType ?? '';
    queryParams.value.agreementContentType = n?.agreement?.agreementContentType ?? '';
    agreementContentType.value = n?.agreement?.agreementContentType.split(',') ?? [];
    getCurrentData(dateRange.value, false);
    if (agreementContentType.value.length > 0) {
      let arr = ['WATER', 'ELECTRICITY', 'AIR'];
      forEach(arr, el => {
        if (agreementContentType.value.indexOf(el) === -1) {
          handleCheckedChange(false, el);
        } else {
          handleCheckedChange(true, el);
        }
      });
    } else {
      showWaterColumn.value = false;
      showEleColumn.value = false;
      showAirColumn.value = false;
    }
    handleFileSuccess(n?.basis ?? []);
    if (n?.agreement?.agreementFileName?.length > 0 && n?.agreement?.agreementFile?.length > 0) {
      fileLists.value = [
        {
          name: n?.agreement?.agreementFileName ?? '',
          url: useGlobalState().globalState.fileUrl + n?.agreement?.agreementFile ?? '',
        },
      ];
    }
  },
});
const [basisHistory, basisHistoryLoading, basisHistoryRun] = useRequest(getBasisHistory, {
  defaultParams: [],
  manual: true,
});
const [, , editAgreementInfoRun] = useRequest(editAgreementInfo, {
  defaultParams: [],
  manual: true,
  onSuccess: data => {
    Message.success(props.openTitle + '成功');
    fileLists.value = [];
    tableLists.value = [];
    enterpriseLists2.value = [];
    enterpriseLists.value = [];
    activeName.value = '';
    queryParams.value.agreementCode = '';
    queryParams.value.agreementAmount = '';
    emit('mpciUpload', false);
  },
});
const [projectInfoLists, , projectInfoRun] = useRequest(getProjectInfo, {
  defaultParams: [{ projectCode: reportCode.value }],
  manual: true,
  onSuccess: data => {
    const arr = data.data.buildingLevelOneList;
    let differentArr = [];
    forEach(enterpriseLists.value, n => {
      forEach(arr, el => {
        if (n.id === el.buildingCode) {
          differentArr.push(n);
        }
      });
    });
    enterpriseLists2.value = differentArr;
    let obj = handleQuery({ projectCode: reportCode.value });
    agreementInfoRun(obj);
  },
});
const handleQuery = params => {
  let formdata = new FormData(); //new出来的对象
  Object.keys(params).forEach(key => {
    formdata.append(key, params[key]);
  });
  return formdata;
};
const getCurrentData = (val, Boolean) => {
  const tableData1 = [];
  queryParams.value.agreementEndTime = val?.[1] ?? '';
  queryParams.value.agreementStartTime = val?.[0] ?? '';
  const list = printYear(val?.[0] ?? '', val?.[1] ?? '');
  list?.map(item => {
    const obj = {
      date: item,
      basisType: '基准能耗',
    };
    const obj2 = {
      date: item,
      basisType: '基准费用',
    };
    tableData1.push(cloneDeep(obj), cloneDeep(obj2));
  });
  getSpanArr(tableData1);
  forEach(tableLists.value, n => {
    n.tableData = cloneDeep(tableData1);
  });
  if (Boolean) {
    agreementContentType.value = [];
    handleCheckedChange(false, 'WATER');
    handleCheckedChange(false, 'ELECTRICITY');
    handleCheckedChange(false, 'AIR');
    queryParams.value.agreementContentType = '';
  }
};
const handleCheckedChange = (val, type) => {
  forEach(tableLists.value, item => {
    forEach(item.tableData, el => {
      if (val === true) {
        if (type === 'WATER') {
          // el.WATER = '';
          set(el, type, '');
          // key.value += 1;
          item.tableData.splice(0, 0);
          // Reflect.set(el, type, '');
          showWaterColumn.value = true;
        } else if (type === 'ELECTRICITY') {
          set(el, type, '');
          showEleColumn.value = true;
        } else if (type === 'AIR') {
          set(el, type, '');
          showAirColumn.value = true;
        }
      } else {
        if (type === 'WATER') {
          showWaterColumn.value = false;
          set(el, type, '');
        } else if (type === 'ELECTRICITY') {
          showEleColumn.value = false;
          set(el, type, '');
        } else if (type === 'AIR') {
          showAirColumn.value = false;
          set(el, type, '');
        }
      }
    });
  });
};
const filterTableData = id => {
  let arr = [];
  forEach(tableLists.value, item => {
    if (item.buildingCode === id) {
      arr = item.tableData;
    }
  });
  return arr;
};
const changeAgreementContentType = val => {
  queryParams.value.agreementContentType = val + '';
  if (openTitle !== '详情') {
    Forms.value.validateField('agreementContentType');
  } else {
    return false;
  }
};
//上传前的回调
const handleFileMainUpload = file => {
  queryParams.value.projectCode = reportCode.value;
};
// 超出限制上传数量回调
const handleExceed = () => {
  Message({
    type: 'warning',
    message: '当前限制最大上传数量：1 ,上传新的文件之前请先删除原文件！',
  });
};
const handleRemove = (file, fileList) => {
  fileLists.value = [];
};
const editTypeData = (rowIndex, row, id, type) => {
  for (let i = 0; i < tableLists.value.length - 1; i++) {
    if (tableLists.value[i].buildingCode === id) {
      if (type === 'WATER') {
        set(tableLists.value[i].tableData[rowIndex], 'WATER', row.WATER);
      } else if (type === 'ELECTRICITY') {
        set(tableLists.value[i].tableData[rowIndex], 'ELECTRICITY', row.ELECTRICITY);
      } else if (type === 'AIR') {
        set(tableLists.value[i].tableData[rowIndex], 'AIR', row.AIR);
      }
    }
  }
};
const jyWater = (rowIndex, row, id, ind) => {
  if (!row.WATER || row.WATER === '') {
    row.waterError = true;
    tableLists.value[ind].tableData[rowIndex].waterError = true;
  } else {
    row.waterError = false;
    tableLists.value[ind].tableData[rowIndex].waterError = false;
  }
};
const jyEle = (rowIndex, row, type, ind) => {
  if (!row.ELECTRICITY || row.ELECTRICITY === '') {
    row.eleError = true;
    tableLists.value[ind].tableData[rowIndex].eleError = true;
  } else {
    row.eleError = false;
    tableLists.value[ind].tableData[rowIndex].eleError = false;
  }
};
const jyAir = (rowIndex, row, type, ind) => {
  if (!row.AIR || row.AIR === '') {
    row.airError = true;
    tableLists.value[ind].tableData[rowIndex].airError = true;
  } else {
    row.airError = false;
    tableLists.value[ind].tableData[rowIndex].airError = false;
  }
};
const addRedStar = (h, { column }) => {
  if (openTitle.value !== '详情') {
    return [h('span', { style: 'color: #F56C6C' }, '*'), h('span', ' ' + column.label)];
  } else {
    return [h('span', ' ' + column.label)];
  }
};
const handleFileSuccess = data => {
  forEach(data, n => {
    forEach(tableLists.value, el => {
      // 1.取对应的楼栋
      if (el.buildingCode === n.buildingCode) {
        forEach(el.tableData, item => {
          if (item.date.substring(0, 4) === n.startTime.substring(0, 4)) {
            if (item.basisType === '基准能耗') {
              if (n.basisType === 'WATER') {
                item.WATER = n.basisQuantity;
                item.waterError = n.basisQuantity ? false : true;
                console.log(n.basisQuantity, 'n.basisQuantity==');
              }
              if (n.basisType === 'ELECTRICITY') {
                item.eleError = n.basisQuantity ? false : true;
                item.ELECTRICITY = n.basisQuantity;
              }
              if (n.basisType === 'AIR') {
                item.airError = n.basisQuantity ? false : true;
                item.AIR = n.basisQuantity;
              }
            } else if (item.basisType === '基准费用') {
              if (n.basisType === 'WATER') {
                item.waterError = n.basisCost ? false : true;
                item.WATER = n.basisCost;
              }
              if (n.basisType === 'ELECTRICITY') {
                item.eleError = n.basisCost ? false : true;
                item.ELECTRICITY = n.basisCost;
              }
              if (n.basisType === 'AIR') {
                item.airError = n.basisCost ? false : true;
                item.AIR = n.basisCost;
              }
            }
          }
        });
      }
    });
  });
};
const handleAvatarErroe = (err, file, fileList) => {
  Message({
    type: 'error',
    message: err?.msg ?? '上传失败，请重新上传',
  });
  fileLists.value.splice(0, 1);
  upload.value.clearFiles();
  emit('mpciUpload', false);
};
const handleUploadChange = (file, fileList) => {
  fileLists.value = fileList;
};
const handleAvatarSuccess = (response, file, fileList) => {
  if (response.code === 200) {
    Message.success(props.openTitle + '成功');
    fileLists.value = [];
    tableLists.value = [];
    emit('mpciUpload', false);
  } else {
    Message({
      type: 'error',
      message: response.msg,
    });
    fileLists.value.splice(0, 1);
    upload.value.clearFiles();
  }
};
const showBgjl = () => {
  if (openTitle.value === '新增') {
    return false;
  } else {
    bgjlOpen.value = true;
    const obj = handleQuery({ projectCode: reportCode.value });
    basisHistoryRun(obj);
  }
};
const objectSpanMethod = ({ row, column, rowIndex, columnIndex }) => {
  // // 判断列的属性
  if (mergeArr.value.indexOf(column.property) !== -1) {
    // 判断其值是不是为0
    if (mergeObj.value[column.property][rowIndex]) {
      return [mergeObj.value[column.property][rowIndex], 1];
    } else {
      // 如果为0则为需要合并的行
      return [0, 0];
    }
  }
};
const objectSpanMethod2 = ({ row, column, rowIndex, columnIndex }, mergeObj) => {
  // // 判断列的属性
  if (mergeArr.value.indexOf(column.property) !== -1) {
    // 判断其值是不是为0
    if (mergeObj[column.property][rowIndex]) {
      return [mergeObj[column.property][rowIndex], 1];
    } else {
      // 如果为0则为需要合并的行
      return [0, 0];
    }
  }
};
const getSpanArr = data => {
  mergeArr.value.forEach((key, index1) => {
    let count = 0; // 用来记录需要合并行的起始位置
    mergeObj.value[key] = []; // 记录每一列的合并信息
    data.forEach((item, index) => {
      // index == 0表示数据为第一行，直接 push 一个 1
      if (index === 0) {
        mergeObj.value[key].push(1);
      } else {
        // 判断当前行是否与上一行其值相等 如果相等 在 count 记录的位置其值 +1 表示当前行需要合并 并push 一个 0 作为占位
        if (item[key] === data[index - 1][key]) {
          mergeObj.value[key][count] += 1;
          mergeObj.value[key].push(0);
        } else {
          // 如果当前行和上一行其值不相等
          count = index; // 记录当前位置
          mergeObj.value[key].push(1); // 重新push 一个 1
        }
      }
    });
  });
};
const convertData = originalData => {
  let arr = [];
  forEach(originalData, n => {
    forEach(n.tableData, el => {
      for (let key in el) {
        if (key === 'WATER' || key === 'ELECTRICITY' || key === 'AIR') {
          let startTime = el.date.substring(0, 4) + '-01-01';
          let obj = null;
          forEach(arr, item => {
            if (item.buildingCode === n.buildingCode && item.startTime === startTime && item.basisType === key) {
              obj = item;
            }
          });
          if (!obj) {
            obj = {
              agreementCode: null,
              basisCost: null,
              basisQuantity: null,
              basisType: null,
              buildingCode: null,
              startTime: startTime,
              endTime: el.date.substring(0, 4) + '-12-31',
            };
            arr.push(obj);
          }
          obj.buildingCode = n.buildingCode;
          if (key === 'WATER') {
            obj.basisType = 'WATER';
            if (el.basisType === '基准能耗') {
              obj.basisQuantity = el.WATER;
            }
            if (el.basisType === '基准费用') {
              obj.basisCost = el.WATER;
            }
          }
          if (key === 'ELECTRICITY') {
            obj.basisType = 'ELECTRICITY';
            if (el.basisType === '基准能耗') {
              obj.basisQuantity = el.ELECTRICITY;
            }
            if (el.basisType === '基准费用') {
              obj.basisCost = el.ELECTRICITY;
            }
          }
          if (key === 'AIR') {
            obj.basisType = 'AIR';
            if (el.basisType === '基准能耗') {
              obj.basisQuantity = el.AIR;
            }
            if (el.basisType === '基准费用') {
              obj.basisCost = el.AIR;
            }
          }
        }
      }
    });
  });
  let arr2 = arr.filter(item => {
    for (let i = 0; i < agreementContentType.value.length; i++) {
      if (item.basisType === agreementContentType.value[i]) {
        return item;
      }
    }
  });
  return JSON.stringify(arr2);
};
const showInput = computed(() => {
  return openTitle.value === '详情' ? false : true;
});
const bgCancel = () => {
  bgjlLists.value = [];
  bgjlOpen.value = false;
};
useWatch(enterpriseLists2, n => {
  activeName.value = n?.[0]?.id;
  // tableLists.value = [];
  forEach(n, item => {
    let obj = {
      buildingCode: item.id,
      tableData: [],
    };
    tableLists.value.push(cloneDeep(obj));
  });
});
useWatch(basisHistory, n => {
  forEach(n?.rows, el => {
    let obj = {
      createTime: el.group.createTime,
      createBy: el.group.createBy,
      activeName: '',
      tableLists: [],
      enterpriseLists: [],
    };
    let buildList = [];

    forEach(el.list, b => {
      forEach(enterpriseLists.value, item => {
        if (item.id === b.buildingCode) {
          if (buildList.findIndex(value => value.id === b.buildingCode) === -1) {
            let obj2 = {
              id: b.buildingCode,
              name: b.buildingName,
            };
            buildList.push(obj2);
          }
        }
      });
    });
    obj.enterpriseLists = buildList;
    obj.activeName = buildList[0].id;
    forEach(obj.enterpriseLists, item => {
      let obj2 = {
        buildingCode: item.id,
        tableData: [],
      };
      obj.tableLists.push(cloneDeep(obj2));
    });
    const arr = useHandleNhData(el.list, obj.tableLists);
    obj.tableLists = cloneDeep(arr);
    forEach(obj.tableLists, arrItem => {
      let mergeObj = {};
      mergeArr.value.forEach((key, index1) => {
        let count = 0; // 用来记录需要合并行的起始位置
        mergeObj[key] = []; // 记录每一列的合并信息
        arrItem.tableData.forEach((item, index) => {
          // index == 0表示数据为第一行，直接 push 一个 1
          if (index === 0) {
            mergeObj[key].push(1);
          } else {
            // 判断当前行是否与上一行其值相等 如果相等 在 count 记录的位置其值 +1 表示当前行需要合并 并push 一个 0 作为占位
            if (item[key] === arrItem.tableData[index - 1][key]) {
              mergeObj[key][count] += 1;
              mergeObj[key].push(0);
            } else {
              // 如果当前行和上一行其值不相等
              count = index; // 记录当前位置
              mergeObj[key].push(1); // 重新push 一个 1
            }
          }
        });
      });
      arrItem.mergeObj = mergeObj;
    });
    bgjlLists.value.push(cloneDeep(obj));
  });
});
useWatch(
  cancel,
  n => {
    if (n === true) {
      agreementContentType.value = [];
      useResetForm(Forms);
      dateRange.value = [];
      fileLists.value = [];
      tableLists.value = [];
      enterpriseLists2.value = [];
      enterpriseLists.value = [];
      activeName.value = '';
      queryParams.value.agreementCode = '';
      queryParams.value.agreementAmount = '';
    } else if (n === false) {
      enterpriseRun({ enterpriseCode: props.enterpriseCode });
      // if (openTitle.value === '详情' || openTitle.value === '编辑') {
      //   let obj = handleQuery({ projectCode: reportCode.value });
      //   projectInfoRun(obj);
      // }
    }
  },
  { deep: true, immediate: true },
);
useWatch(
  mpciSubmit,
  n => {
    if (n) {
      Forms.value.validate(valid => {
        if (valid) {
          if (dateRange.value && dateRange.value[0].length > 0 && dateRange.value[1].length > 0) {
            some(tableLists.value, el => {
              some(el.tableData, item => {
                for (let key in item) {
                  if (agreementContentType.value.indexOf(key) > -1) {
                    if (key === 'WATER' || key === 'ELECTRICITY' || key === 'AIR') {
                      if (!item[key] || item[key].length === 0) {
                        // Message.error('表格中的每项为必填');
                        REQUIRED.value = true;
                        return true;
                      } else {
                        REQUIRED.value = false;
                      }
                    }
                  } else {
                    REQUIRED.value = false;
                  }
                }
              });
              if (REQUIRED.value) {
                return true;
              }
            });
            if (REQUIRED.value) {
              Message.error('表格中的每项为必填');
            } else {
              if (fileLists.value.length > 0) {
                queryParams.value.agreementStartTime = dateRange.value[0];
                queryParams.value.agreementEndTime = dateRange.value[1];
                queryParams.value.projectCode = props.reportCode;
                const arr = cloneDeep(tableLists.value);
                let str = convertData(arr);
                queryParams.value.basisJson = str;
                if (fileLists.value[0].url) {
                  let obj = handleQuery(queryParams.value);
                  editAgreementInfoRun(obj);
                } else {
                  upload.value.submit();
                }
              } else {
                Message.error('请上传文件！');
              }
            }
          } else {
            Message.error('请选择服务年限');
          }
        } else {
          return false;
        }
      });
    }
  },
  // { deep: true, immediate: true },
);
useWatch(
  openTitle,
  n => {
    if (n === '新增') {
      tableLists.value = [];
      showWaterColumn.value = false;
      showEleColumn.value = false;
      showAirColumn.value = false;
    }
  },
  { deep: true, immediate: true },
);
useWatch(
  mpciBuildingCode,
  n => {
    if (n) {
      let differentArr = [];
      forEach(enterpriseLists.value, item => {
        forEach(n, el => {
          if (item.id === el.buildingCode) {
            differentArr.push(item);
          }
        });
      });
      enterpriseLists2.value = differentArr;
    }
  },
  { deep: true, immediate: true },
);
useWatch(
  mpciDisabled,
  n => {
    if (n) {
      enterpriseLists2.value = enterpriseLists.value;
    }
  },
  { deep: true, immediate: true },
);
useWatch(tableLists.value, n => {}, { deep: true, immediate: true });
</script>
<template>
  <div v-loading="agreementInfoRunLoading">
    <el-form
      :model="queryParams"
      ref="Forms"
      size="small"
      label-width="150px"
      class="u-mt20"
      :disabled="mpciDisabled"
      :inline="true"
    >
      <el-form-item
        label="签约时间："
        prop="agreementSignTime"
        :rules="{ required: true, message: '请选择签约时间', trigger: 'change' }"
      >
        <el-date-picker
          style="width: 300px"
          v-model="queryParams.agreementSignTime"
          type="date"
          value-format="yyyy-MM-dd"
          placeholder="请选择签约时间"
        ></el-date-picker>
      </el-form-item>
      <el-form-item
        label="服务年限"
        prpp="agreementEndTime"
        :rules="{ required: true, message: '请选择服务年限', trigger: 'change' }"
      >
        <el-date-picker
          v-model="dateRange"
          size="small"
          style="width: 240px"
          value-format="yyyy-MM-dd"
          type="daterange"
          range-separator="-"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
          @change="getCurrentData($event, true)"
        ></el-date-picker>
      </el-form-item>
      <el-form-item
        label="托管类型："
        prop="entrustType"
        :rules="{ required: true, message: '请选择托管类型', trigger: 'blur' }"
      >
        <el-select v-model="queryParams.entrustType" placeholder="请选择托管类型">
          <el-option label="能源托管型" value="TRUSTEESHIP" />
          <el-option label="保证型" value="ENSURE" />
          <el-option label="分享型" value="SHARE" />
        </el-select>
      </el-form-item>
      <el-form-item
        label="服务内容："
        prop="agreementContentType"
        :rules="openTitle === '详情' ? [] : [{ required: true, message: '请选择', trigger: 'change' }]"
      >
        <el-checkbox-group v-model="agreementContentType" @change="changeAgreementContentType">
          <el-checkbox label="WATER" value="WATER" @change="handleCheckedChange($event, 'WATER')">水</el-checkbox>
          <el-checkbox label="ELECTRICITY" value="ELECTRICITY" @change="handleCheckedChange($event, 'ELECTRICITY')">
            电
          </el-checkbox>
          <el-checkbox label="AIR" value="AIR" @change="handleCheckedChange($event, 'AIR')">气</el-checkbox>
        </el-checkbox-group>
      </el-form-item>
    </el-form>
    <el-divider></el-divider>
    <div class="u-df-st">
      <div class="u-fs16 u-reg-text">能耗/费用基准维护</div>
      <div class="prompt u-fs12 u-df-st u-ml20">
        <i class="el-icon-info u-ml10 u-mr10"></i>
        以下类型单位为：水-（t）、电-（kWh）、气-（m³）、费用-（元）
      </div>
    </div>
    <div style="position: relative">
      <el-tabs v-model="activeName" class="u-base-fg">
        <el-tab-pane v-for="(item, indexs) in enterpriseLists2" :key="item.id" :label="item.name" :name="item.id">
          <!-- tableLists[indexs]?.tableData ?? [] -->
          <el-table ref="tables" :key="item.id" :data="filterTableData(item.id)" :span-method="objectSpanMethod">
            <el-table-column prop="date" label="托管年限"></el-table-column>
            <el-table-column width="200" label="基准类型">
              <template slot-scope="scope">
                {{ typeList[scope.$index % typeList.length] }}
              </template>
            </el-table-column>
            <el-table-column prop="WATER" label="水" v-if="showWaterColumn" :render-header="addRedStar">
              <template slot-scope="scope">
                <el-form :model="scope.row" size="small" class="editForm">
                  <el-form-item label="" :error="scope.row.waterError ? '不能为空' : ''">
                    <el-input
                      v-filter-input
                      v-show="showInput"
                      v-model="scope.row.WATER"
                      clearable
                      size="small"
                      oninput="value=value.replace(/[^0-9.]/g,'')"
                      @blur="editTypeData(scope.$index, scope.row, item.id, 'WATER')"
                      @input="jyWater(scope.$index, scope.row, item.id, indexs)"
                    />

                    <span v-show="!showInput">{{ scope.row.WATER }}</span>
                  </el-form-item>
                </el-form>
              </template>
            </el-table-column>
            <el-table-column prop="ELECTRICITY" label="电" v-if="showEleColumn" :render-header="addRedStar">
              <template slot-scope="scope">
                <el-form :model="scope.row" size="small" class="editForm">
                  <el-form-item label="" :error="scope.row.eleError ? '不能为空' : ''">
                    <el-input
                      v-filter-input
                      v-show="showInput"
                      v-model="scope.row.ELECTRICITY"
                      clearable
                      size="small"
                      oninput="value=value.replace(/[^0-9.]/g,'')"
                      @blur="editTypeData(scope.$index, scope.row, item.id, 'ELECTRICITY')"
                      @input="jyEle(scope.$index, scope.row, 'WATER', indexs)"
                    />
                    <span v-show="!showInput">{{ scope.row.ELECTRICITY }}</span>
                  </el-form-item>
                </el-form>
              </template>
            </el-table-column>
            <el-table-column prop="AIR" label="气" v-if="showAirColumn" :render-header="addRedStar">
              <template slot-scope="scope">
                <el-form :model="scope.row" size="small" class="editForm">
                  <el-form-item label="" :error="scope.row.airError ? '不能为空' : ''">
                    <el-input
                      v-filter-input
                      v-show="showInput"
                      v-model="scope.row.AIR"
                      clearable
                      size="small"
                      oninput="value=value.replace(/[^0-9.]/g,'')"
                      @blur="editTypeData(scope.$index, scope.row, item.id, 'AIR')"
                      @input="jyAir(scope.$index, scope.row, 'WATER', indexs)"
                    />
                    <span v-show="!showInput">{{ scope.row.AIR }}</span>
                  </el-form-item>
                </el-form>
              </template>
            </el-table-column>
          </el-table>
        </el-tab-pane>
      </el-tabs>
      <div class="buttonBox u-df-st">
        <DataImport
          :onlyShowBtn="true"
          title="收资信息"
          templateTit="收资信息.xlsx"
          :uploadUrl="UploadUrl"
          :extraParams="{ enterpriseCode: enterpriseCode, projectCode: reportCode }"
          downloadUrl="/businessbase/dataImportTemplate/download"
          pageParams="EN_JZ"
          @handleFileSuccess="handleFileSuccess"
          :btnDisabled="mpciDisabled"
          :tgxmParms="queryParams"
        />
        <el-button size="small" type="primary" plain class="u-ml10" @click="showBgjl">变更记录</el-button>
      </div>
    </div>
    <el-upload
      class="upload-demo u-ml10 u-mt20"
      ref="upload"
      :action="uploadList.url"
      :headers="uploadList.headers"
      :data="queryParams"
      :before-upload="handleFileMainUpload"
      :on-success="handleAvatarSuccess"
      :on-error="handleAvatarErroe"
      :on-change="handleUploadChange"
      :on-remove="handleRemove"
      multiple
      :file-list="fileLists"
      :auto-upload="false"
      :limit="1"
      :on-exceed="handleExceed"
      :disabled="openTitle === '详情' ? true : false"
    >
      <el-button
        size="small"
        plain
        class="el-icon-upload2"
        type="primary"
        style="font-size: 14px"
        :disabled="mpciDisabled"
      >
        点击上传合同附件
      </el-button>
    </el-upload>
    <el-dialog
      :visible.sync="bgjlOpen"
      :close-on-click-modal="false"
      :close-on-press-escape="false"
      :append-to-body="true"
      :before-close="bgCancel"
      width="50%"
    >
      <div slot="title" class="dialog-title">
        <span class="tit u-prim-text">
          <span class="u-prim-text">基准变更记录</span>
        </span>
      </div>
      <div v-loading="basisHistoryLoading" class="bg-box">
        <div :class="ind === 0 ? '' : 'u-mt20'" v-for="(el, ind) in bgjlLists ?? []" :key="ind">
          <div class="u-base-title u-fs16 u-mb10">
            变更时间：{{ el?.createTime ?? '--' }}
            <span class="u-pl20">变更人：{{ el?.createBy ?? '--' }}</span>
          </div>
          <el-tabs v-model="el.activeName" class="u-base-fg">
            <el-tab-pane
              v-for="(bgItem, bgInd) in el.enterpriseLists"
              :key="bgItem.id"
              :label="bgItem.name"
              :name="bgItem.id"
            >
              <el-table
                ref="tables"
                :data="el.tableLists[bgInd]?.tableData ?? []"
                :span-method="param => objectSpanMethod2(param, el.tableLists[bgInd]?.mergeObj)"
              >
                <el-table-column prop="date" label="托管年限"></el-table-column>
                <el-table-column width="200" label="基准类型">
                  <template slot-scope="scope">
                    {{ typeList[scope.$index % typeList.length] }}
                  </template>
                </el-table-column>
                <el-table-column prop="WATER" label="水">
                  <template slot-scope="scope">
                    <span>{{ scope.row.WATER }}</span>
                  </template>
                </el-table-column>
                <el-table-column prop="ELECTRICITY" label="电">
                  <template slot-scope="scope">
                    <span>{{ scope.row.ELECTRICITY }}</span>
                  </template>
                </el-table-column>
                <el-table-column prop="AIR" label="气">
                  <template slot-scope="scope">
                    <span>{{ scope.row.AIR }}</span>
                  </template>
                </el-table-column>
              </el-table>
            </el-tab-pane>
          </el-tabs>
        </div>
      </div>
    </el-dialog>
  </div>
</template>
<style lang="scss" scoped>
@import url(../css/index.scss);
.buttonBox {
  position: absolute;
  top: 0;
  right: 0;
}
.bg-box {
  height: 600px;
}
</style>
